<template>
  <div ref="main" class="water-quality-pot">

  </div>
</template>

<script setup name="WaterQualityParameter">
import {ref, onMounted} from "vue";
import * as echarts from "echarts";

const main = ref()  //使用ref创建虚拟DOM引用

function init() {
  let myChart = echarts.init(main.value);
  const barBorderRadius = [0, 20, 20, 0]
  let option = {
    dataset: {
      source: [
        ['score', 'number', 'unit', 'product'],
        [89.3, 0.5, 'NTU', 'SS'],
        [57.1, 25, '℃', '水温'],
        [74.4, 0.4, 'NTU', '浊度'],
        [50.1, 0.02, 'Mg/l', '余氯'],
        [89.7, 0.1, 's/cm', '电导率'],
        [68.1, 17, 'Mg/L', '溶解氧'],
        [40.6, 7.5, 'ph', 'PH']
      ]
    },
    xAxis: {name: 'score', show: false},
    yAxis: {
      type: 'category',
      axisLabel: {
        color: '#9EC7FF'
      },
      axisLine: {
        lineStyle: {
          color: 'transparent'
        }
      }
    },
    grid: {
      bottom: 10,
      top: 10,
      right:70
    },
    series: [
      {
        type: 'bar',
        barWidth:22,
        showBackground: true,
        label: {
          show: true,
          position: 'right',
          color: '#9EC7FF',
          formatter: '{@number}{@unit}',
        },
        backgroundStyle: {
          borderRadius: barBorderRadius
        },
        encode: {
          // Map the "amount" column to X axis.
          x: 'score',
          // Map the "product" column to Y axis
          y: 'product'
        },
        itemStyle: {
          barBorderRadius,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {offset: 0, color: '#027FFF'},
            {offset: 1, color: '#36FFFD'}
          ])
        },
      }
    ]
  };

  myChart.setOption(option);
  changLabel()
 function changLabel (){
   setTimeout(function(){
     let width = myChart.getWidth();
     let opt = myChart.getOption();
     let grid = opt.grid[0];
     let right = grid.right;
     // console.log(right);
     let left = grid.left;
     right = width*parseFloat(right)/100;
     left = width*parseFloat(left)/100;
     let x = width-left-right;
     myChart.setOption({
       series:[{
         label:{
           show:true,
           position:'left',
           offset:[x+352,0]
         }
       }]
     })
   });
 }  

}

onMounted(() => {
  init()
})

</script>

<style scoped>
.water-quality-pot {
  width: 100%;
  height: 100%;

}
</style>